import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
// import '../service.css';
import { Input,Toast } from 'antd-mobile';
import './car.css';

const Parking = () => {
  const navigate = useNavigate();
  const [carPlate1, setCarPlate1] = useState('');
  const [carPlate2, setCarPlate2] = useState('');

  const handleBack = () => {
    navigate(-1);
  };

  const handleSubmit = () => {
    if (!carPlate1 && !carPlate2) {
      alert('请至少输入一个车牌号码');
      return;
    }
    setCarPlate1("")
    setCarPlate2("")
    Toast.show({
      content: '车牌号码提交成功',
      position: 'top',
    })
    // alert('车牌号码提交成功');
    // 实际应用中这里应有API调用
  };

  return (
    <div className="parking-container">
      {/* 顶部导航栏 */}
      <div className="ljl-parking-header">
        <button className="ljl-back-button" onClick={handleBack}>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="30" height="30">
            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
          </svg>
        </button>
        <h1 className="ljl-header-title">免费停车</h1>
        <div className="ljl-header-right">
          <div className="ljl-dots-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24" height="24">
              <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
            </svg>
          </div>
        </div>
      </div>

      {/* 房间信息 */}
        <div className='ljl-car-center'>
            <div className='ljl-car-center-top'>06月02日 星期五 - 06月05日 星期一&nbsp;&nbsp; | &nbsp;&nbsp;3晚 </div>
            <div className='ljl-car-center-bottom'>豪华大床商务套房&nbsp;&nbsp;|&nbsp;&nbsp;含双早&nbsp;&nbsp;|&nbsp;&nbsp;2008</div>
        </div>  


      {/* 车牌输入区域 */}
        <div className='ljl-car-center-box'>
            <h6 className='ljl-car-center-box-top'>车辆号码</h6>
            <div className='ljl-car-center-box-first'>
                <div className='ljl-car-center-box-inp1'>车辆1：</div>
                <Input type="text" 
                style={{height:"0.4rem"}} 
                placeholder='请输入车牌号，入住期间最多免费停两辆车'
                value={carPlate1}
                onChange={(e) => setCarPlate1(e)}
                />
            </div>
            {/* <hr /> */}
            <div  className='ljl-car-center-box-two'>
                <div className='ljl-car-center-box-inp2'>车辆2：</div>
                <Input type="text" 
                style={{height:"0.4rem"}} 
                placeholder='请输入车牌号，入住期间最多免费停两辆车'
                value={carPlate2}
                onChange={(e) => setCarPlate2(e)}
                />
            </div>
            <div className='ljl-car-bottom'>提交车牌号后，入住期间可无限次免费停车。</div>
        </div>


      {/* <div className="license-plate-container">
        <div className="license-plate-title">车牌号码</div>
        
        <div className="license-plate-input-group">
          <div className="license-plate-label">车辆1:</div>
          <input 
            type="text" 
            className="license-plate-input"
            placeholder="请输入车牌，入住期间您多次免费停泊车辆"
            value={carPlate1}
            onChange={(e) => setCarPlate1(e.target.value)}
          />
        </div>
        
        <div className="license-plate-input-group">
          <div className="license-plate-label">车辆2:</div>
          <input 
            type="text" 
            className="license-plate-input"
            placeholder="请输入车牌，入住期间您多次免费停泊车辆"
            value={carPlate2}
            onChange={(e) => setCarPlate2(e.target.value)}
          />
        </div>
        
        <div className="license-plate-notice">
          提交车牌号后，入住期间可无限次免费停车。
        </div>
      </div> */}

      {/* 提交按钮 */}
      <div className="submit-button-container">
        <button className="submit-button" onClick={handleSubmit}>
          提交车牌号
        </button>
      </div>
    </div>
  );
};

export default Parking; 